<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="../../javascript/react.development.js"></script>
<script src="../../javascript/react-dom.development.js"></script>
<script src="../../javascript/babel.min.js"></script>
<script type="text/babel">
    /*
    class App {
           constructor(name, age) {
               this.name = name
               this.age = age
           }
           study() {
               /!*
               * study方法放在了哪里？类的原型对象上供实例使用
               * 通过App实例调用study方法的时候，this指向App实例
               * *!/
               console.log(this)
           }
       }

       const p = new App("马玉", 55)
       console.log(p)
       p.study() // App的实例
       const x = p.study
       x() // undefined (类中的方法默认开启了严格模式+babel的存在)
   */


    /*
    * 调用都是有()的，所以这里只是把onClick指向堆中的changeFlag,就没有通过实例调用————所以this会指向window
    * 类中的方法默认开启了严格模式+使用babel编译后也会是严格模式（严格模式下this的指向不是window，而是undefined)
    * */
    class App extends React.Component {
        constructor(props) {
            super(props)
            this.state = {flag: true}
        }
        render() {
            const {flag} = this.state
            return (
                <div className="app">
                    <h1>今天天气很{flag ? "炎热" : "凉爽"}</h1>
                    <button onClick={this.changeFlag}>切换</button>
                </div>
            );
        }
        changeFlag() {
            /*
            * changeFlag放在哪里？App的原型对象上，供实例使用
            * 由于changeFlag是作为onClick的回调，不是通过实例调用的，是直接调用
            * 类中的方法默认开启了局部的严格模式，所以changeFlag方法中的this指向的是undefined
            * */
            console.log(this)
        }
    }
    ReactDOM.render(<App></App>, document.querySelector("#root"))

    const a=new App()
    a.changeFlag() // 实例调用this指向App实例对象
</script>
</body>
</html>